<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 10rem;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        .myshop_bouned_main {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-bottom: 0.3rem
        }

        .myshop_bouned_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            margin-bottom: 2rem;
        }

        .myshop_bouned_content {
            position: fixed;
            bottom: 0;
            z-index: 9999;
            background: #fff;
            width: 100vw;
            display: none;
        }
        .RMB {
          padding-left: 2rem;
          position: relative;
        }
        .RMB:after {
          position: absolute;
          left: 0;
          top: 0;
          content: '￥';
          font-size: 2rem;
          line-height: 2rem;
          text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="user_nav_line"></div>
        <ul class="aui-list aui-media-list" style="width:90vw;margin:0 auto;border-radius:5%;padding-bottom:1rem;padding-top:0.2rem">
            <li v-if="type == 2" class="aui-list-item-middle" style="margin-left:0.75rem;margin-right:0.75rem;border-bottom:1px solid #eee;" onclick="brokerage()">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media" style="width:2rem;">
                        <img src="../../image/my/m53.png" class="aui-img-round aui-list-img-sm">
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">支付宝</div>
                        </div>
                    </div>
                </div>
            </li>
            <li v-else-if="type == 3" class="aui-list-item-middle" style="margin-left:0.75rem;margin-right:0.75rem;border-bottom:1px solid #eee;" onclick="brokerage()">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media" style="width:2rem;">
                        <img src="../../image/my/m41.png" class="aui-img-round aui-list-img-sm">
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">微信</div>
                        </div>
                    </div>
                </div>
            </li>
            <li v-else-if="type == 1" class="aui-list-item-middle" style="margin-left:0.75rem;margin-right:0.75rem;border-bottom:1px solid #eee;" onclick="brokerage()">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media" style="width:2rem;">
                        <img src="../../image/my/m51.png" class="aui-img-round aui-list-img-sm">
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">建设银行储蓄卡(9559)</div>
                        </div>
                    </div>
                </div>
            </li>
            <li style="margin-left:0.75rem;margin-right:0.75rem;border-bottom:1px solid #eee;">
                <div style="margin-top:1.5rem">充值金额</div>
                <!-- <div style="font-size:2rem;margin-top:0.1rem">￥7500.00</div> -->
                <div class="RMB">
                  <input type="number" v-model="amount" style="font-size:2rem;margin:0.1rem 0;">
                </div>

            </li>
            <li style="margin-left:0.75rem;margin-right:0.75rem;margin-top:2rem">
                <div style="width:76vw;margin:0 auto;color:#fff;height:2.2rem;line-height:2.2rem;background:#F72526;text-align:center;margin-bottom:1.5rem;border-radius: 1.2rem;" @click="Submit()">充值</div>
            </li>
        </ul>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">

    function brokerage() {
        api.openWin({
            name: 'rechargeTab',
            url: './headerone.html',
            pageParam: {
                msg: '充值方式',
                url: './rechargeTab.html'
            }
        });

    }


    function goback() {
        api.closeWin();
    }
    apiready = function(url) {

        var app = new Vue({
            el: "#app",
            data: {
                token: '',
                type: 2,
                bankId: '',
                amount: ''
            },
            created: function() {
              var $_this = this;
                $_this.token = $api.getStorage('token');
            },
            methods: {
              Submit:function() {
                var $_this = this;
                if ($_this.type != 2) {
                  api.toast({ msg: '暂未开通',duration: 2000,location:'middle' });
                  return
                }
                // if($_this.type == 1 && $_this.bankId == '') {
                //   api.toast({
                //       msg: '请选择银行卡',
                //       duration: 2000,
                //       location: 'bottom'
                //   });
                //   return;
                // }
                api.ajax({
                    url: window.Url.Freeucenter_balanceRecharge,
                    method: 'post',
                    data: {
                        values: {
                            token: $_this.token,
                            amount: Base64.encode('UNO'+$_this.amount+'HACHA'),
                            type: $_this.type,
                            bankId: $_this.bankId
                        }
                    }
                }, function(ret, err) {
                    if (ret.re == 1) {

                      var aliPay = api.require('aliPay');
                      aliPay.payOrder({
                          orderInfo: ret.data.pay_info
                      }, function(ret, err) {
                          switch (ret.code) {
                            case '9000':
                              api.toast({ msg: '支付成功',duration: 2000,location:'middle' });
                              api.openWin({
                                  name: 'rechargeSuccess',
                                  url: './headerone.html',
                                  pageParam: {
                                      msg: '充值成功',
                                      url: './rechargeSuccess.html',
                                      amount: $_this.amount
                                  }
                              });
                              break;
                            case '4000':
                              api.toast({ msg: '系统异常',duration: 2000,location:'middle' });
                              break;
                            case '4001':
                              api.toast({ msg: '数据格式不正确',duration: 2000,location:'middle' });
                              break;
                            case '4003':
                              api.toast({ msg: '该用户绑定的支付宝账户被冻结或不允许支付',duration: 2000,location:'middle' });
                              break;
                            case '4004':
                              api.toast({ msg: '该用户已解除绑定',duration: 2000,location:'middle' });
                              break;
                            case '4005':
                              api.toast({ msg: '绑定失败或没有绑定',duration: 2000,location:'middle' });
                              break;
                            case '4006':
                              api.toast({ msg: '订单支付失败',duration: 2000,location:'middle' });
                              break;
                            case '4010':
                              api.toast({ msg: '重新绑定账户',duration: 2000,location:'middle' });
                              break;
                            case '6000':
                              api.toast({ msg: '支付服务正在进行升级操作',duration: 2000,location:'middle' });
                              break;
                            case '6001':
                              api.toast({ msg: '用户中途取消支付操作',duration: 2000,location:'middle' });
                              break;
                            default:
                              api.toast({ msg: ret.code,duration: 2000,location:'middle' });
                          }
                      });

                    } else {
                        console.log(JSON.stringify(ret));
                    }
                });

              }
            },
            mounted: function() {
                var $_this = this;
                //接收支付方式
                api.addEventListener({
                    name: 'fh_fshi'
                }, function(ret, err) {
                    $_this.type = ret.value.num;
                });
            }
        })
    };


    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }
</script>

</html>
